import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';

import {  Flex,ListView,SegmentedControl } from 'antd-mobile';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import CouponListItem from './couponListItem';
import {coupon} from "./couponList.less";

class CouponList extends Component {
    constructor(props) {
        super(props);
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.couponList = [];
        this.AlloyTouch=null;
        this.state = {
            orderEntities:[],
            selectedIndex: parseInt(this.props.match.params.data),
            pageNo: 1,
            dataSource: this.ds.cloneWithRows(this.couponList),
            hasMore: false,
            isLoading: false,
            isInit: true,
            dataLength: 0
        };
    }

    refreshList = ({pageNo, selectedIndex}) => {
        let couponIsUser = null;
        switch (selectedIndex) {
            case 0:
                couponIsUser = 0;
                break;
            case 1:
                couponIsUser = 1;
                break;
            case 2:
                couponIsUser = 2;
                break;
        }

        this.props.dispatch({type:"couponList/CouponEFF",obj:{couponIsUser,pageNo}}).then(result => {
            this.setState({
                isLoading: false
            });
            const {couponList=[]} =this.props.couponList;
            const data = couponList || [];
            console.log(this.props.couponList)
            const pageSize = this.props.couponList.pageSize;
            const dataLength = data.length;
            let hasMore = true;
            if (dataLength < pageSize) {
                hasMore = false;
            }
            if (this.state.isInit) {
                this.couponList = data;
            } else {
                this.couponList = [...this.couponList, ...data];
            }
            this.setState({
                hasMore,
                pageNo,
                dataSource: this.ds.cloneWithRows(this.couponList),
                dataLength: data.length
            })

        })
    }
    componentDidMount(){
        this.refreshList({
            pageNo: 1,
            selectedIndex: this.state.selectedIndex
        });
    }

    refresh = () => {
        this.refreshList({
            pageNo: 1,
            selectedIndex: this.state.selectedIndex
        });
    }
    onEndReached = (event) => {
        if (this.state.isLoading || !this.state.hasMore) {
            return;
        }
        this.setState({
            isLoading: true,
            isInit: false
        });
        let pageNo = this.state.pageNo + 1;
        this.refreshList({
            pageNo,
            selectedIndex: this.state.selectedIndex,
        });
    }
    componentDidUpdate(prevProps, prevState) {
        // 当前url参数
        const type = parseInt(this.props.match.params.data);
        // 如果变化参数
        if (type != this.state.selectedIndex) {
            this.setState({
                pageNo: 1,
                selectedIndex: type,
                isInit: true
            })
            this.refreshList({
                pageNo: 1,
                selectedIndex: type
            });
        }
    }
    upDatePage = () => this.refreshList({pageNo: 1, selectedIndex: this.state.selectedIndex})
    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;

    };
    render() {
        const {pageSize} = this.props.couponList;
        const {selectedIndex} = this.state;
        const footer = <div style={{padding: 30, textAlign: 'center'}}>
            {this.state.dataLength <= 0 ? <div className="mei"><span style={{position:"absolute",bottom:"0",left:"30%",fontSize:".3rem"}}>没有可查看的优惠券呦!</span></div> : this.state.isLoading ? '加载中...' : '加载完毕'}
        </div>;
        return (
            <Flex direction="column" style={{height:"100%", position: 'relative'}} className={coupon}>
                <NavTopBar title="优惠券" isBlack={1} jumpUrl={`/my`} dispatch={this.props.dispatch} />
                <SegmentedControl
                    className='orderlist-header'
                    onChange={(e) => {
                        this.props.dispatch(routerRedux.replace({
                            pathname:`/couponList/${e.nativeEvent.selectedSegmentIndex}`
                        }));
                        document.getElementsByClassName("am-list-view-scrollview")[0].scrollTo(0,0);
                    }}
                    selectedIndex={selectedIndex}
                    values={['未使用', '已使用', '已过期']}
                    style={{
                        height: '0.9rem',
                        width:"100%",
                        color:"#333",
                        backgroundColor:"#fff",
                        fontSize: '.24rem',
                    }}/>
                <div className="wx-orderlist" style={{width: "100%", position: 'absolute', top: '1.9rem', bottom: '0rem'}}>
                    <ListView
                        style={{
                            height: '100%'
                        }}
                        pageSize={pageSize}
                        renderFooter={() => footer}
                        onEndReached={this.onEndReached}
                        onEndReachedThreshold={50}
                        dataSource={this.state.dataSource}
                        renderRow={(dataItem) => (
                            <CouponListItem
                                dataItem={dataItem}
                                status={ this.upDatePage }>
                            </CouponListItem>
                        )}/>
                </div>
            </Flex>
        );
    }
}

export default connect(({ couponList }) => ({ couponList }))(CouponList);
